<template>
  <view class="container">
    <view class="list-item1">
      <u-button @click="setChartType('bar')">分布统计</u-button>
      <u-button @click="setChartType('pie')">类型统计</u-button>
      <u-button @click="setChartType('line')">增长趋势</u-button>
    </view>
    <view>
      <BarChart v-if="chartType === 'bar'" class="echart" :chartData="barData"/> <!-- 柱状图 -->
      <PieChart v-if="chartType === 'pie'" class="echart" :chartData="pieData"/> <!-- 饼图 -->
      <LineChart v-if="chartType === 'line'" class="echart" :chartData="lineData"/> <!-- 线型图 -->
      <!-- 列表展示 -->
      <view class="list-container" v-if="chartType === 'pie'">
        <view v-for="(item, index) in pieData"
              :key="index"
              :class="['list-item', {'even-row': index % 2 === 0, 'odd-row': index % 2 !== 0}]">
          <span class="item-index">{{ index + 1 }}</span>
          <span class="item-label">{{ item.name }}</span>
          <span class="item-value">{{ item.value }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import BarChart from '../echarts/barChart.vue';
  import PieChart from '../echarts/pieChart.vue';
  import LineChart from '../echarts/lineChart.vue';
  import {getVehicleDistCount, getVehicleTypeCount, getVehicleTrendCount} from "@/common/api/hub_ygzw/statistical/statistical.js";
  export default {
    components: {
      BarChart,
      PieChart,
      LineChart,
    },
    mounted() {
      this.getVehicleDistCount()
    },
    data() {
      return {
        barData: null,
        pieData: null,
        lineData: null,
        chartType: '',
        areacode: '420000'
      };
    },
    methods: {
      getVehicleDistCount() {
        getVehicleDistCount().then((res) => {
          if (res.statusCode === 200) {
            var result = [];
            res.data.data.forEach(item => {
              var object = {};
              object.label = item.areaName;
              object.value = item.count;
              result.push(object);
            })
            this.barData = result;
            this.chartType = 'bar';
          } else {
            uni.showToast({ title: res.message || "发送失败", icon: "none" });
          }
        })
      },
      getVehicleTypeCount() {
        getVehicleTypeCount().then((res) => {
          if (res.statusCode === 200) {
            var result = [];
            res.data.data.forEach(item => {
              var object = {};
              object.name = item.typename;
              object.value = item.count;
              result.push(object);
            })
            this.pieData = result;
            this.chartType = 'pie';
          } else {
            uni.showToast({ title: res.message || "发送失败", icon: "none" });
          }
        })
      },
      getVehicleTrendCount(areacode) {
        getVehicleTrendCount(areacode).then((res) => {
          if (res.statusCode === 200) {
            const result = [];
            const transtypeList = [...new Set(res.data.data.map(item => item.transtype))];
            transtypeList.forEach(transtype => {
              const series = {
                name: transtype,
                labels: [],
                values: []
              };
              for (let year = 2020; year <= 2024; year++) {
                const item = res.data.data.find(d => d.year === year.toString() && d.transtype === transtype);
                series.labels.push(`${year}`);
                series.values.push(item ? item.count : 0); // 如果没有数据，默认为0
              }
              result.push(series);
            });
            this.lineData = result;
            console.log(result)
            this.chartType = 'line';
          } else {
            uni.showToast({ title: res.message || "发送失败", icon: "none" });
          }
        })
      },
      setChartType(type) {
        if (type === 'bar') {
          this.getVehicleDistCount()
        } else if (type === 'pie') {
          this.getVehicleTypeCount()
        } else if (type === 'line') {
          if (this.areacode === '') {
            uni.showToast({ title: "请选择省份", icon: "none" });
            return;
          }
          this.getVehicleTrendCount(this.areacode)
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 10px;
    background-color: #f3f6fa;
    height: 100vh;
    box-sizing: border-box;

    .list-item1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      height: 32px;
      background-color: #ebeef6;
      border-radius: 3px;
    }

    .echart {
      margin-top: 30px;
    }

    .list-container {
      margin-top: 20px;
      border-radius: 4px;
      overflow: hidden; // 避免边框溢出
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      transition: background-color 0.3s;
    }

    .even-row {
      background-color: #f9f9f9; // 隔行换色 - 偶数行
    }

    .odd-row {
      background-color: #ffffff; // 隔行换色 - 奇数行
    }

    .item-index {
      flex: 0.5; // 占据可用空间
    }

    .item-label {
      flex: 1; // 占据可用空间
    }

    .item-value {
      flex: 1;
      text-align: right; // 右对齐
    }
  }
</style>
